4000-888-103

资讯动态Material Design Environment Light and shadows资讯详情

Material Design Environment Light and shadows

2019-11-01 17:35:51

 

目录


阴影

材料界面在遮挡光源时会投射阴影。

 

光影
在材料设计环境中,虚拟灯照亮了UI。 主光源投射出更清晰的定向阴影,称为直射阴影。 从各个角度出现的环境光创建扩散的柔和阴影,称为环境阴影。


 

 

光源

材质环境中的阴影由主光源和环境光投射。 在Android和iOS开发中,因为各种元素在z轴占据了不同大小的位置,遮住了这些光线。 在网页上,用y轴上的重叠来实现阴影效果。 下面的案例中,卡片的高度是6dp


 

 

阴影

阴影提供关于深度的,移动方向和界面边缘的提示。 界面的阴影由其高度和与其他界面的关系决定。

 

用法

由于阴影表示界面之间的高度差,因此必须在整个产品中始终如一地使用阴影。

通过使用一致的阴影来描绘高度。


阴影大小反映了高度。 较高高度的界面具有较大的阴影,而较低高度的界面具有较小的阴影。


视频播放器



00:00

00:00

00:09

使用上/下箭头键来增高或降低音量。



如果您的产品不使用阴影,请以其他方式表达高度,例如通过视差动效。

 

视频播放器



00:00

00:00

00:07

使用上/下箭头键来增高或降低音量。



在此重新排序的交互期间,阴影的出现表明该列表项已被提升并可以移动到其同级列表项之前

 

阴影和动效
阴影提供有关界面的运动方向以及界面之间距离是增加还是减少的有效提示。

视频播放器



00:00

00:00

00:02

使用上/下箭头键来增高或降低音量。


当界面改变形状或比例,但其高度保持不变时,其阴影应该不变。

视频播放器



00:00

00:00

00:02

使用上/下箭头键来增高或降低音量。


当界面改变其高度时,其阴影应该改变。

 


关键词:h5页面可实现功能 如何做h5 怎么看出页面是h5页面

上一页 下一页

0
↑ 回到顶部

热门推荐

发送
//www.weibenh5.com/newhome/images/manman.png